iT邦幫忙

2021 iThome 鐵人賽

DAY 6
1
自我挑戰組

Re: 從 Next.js 開始的 React 生活系列 第 6

[Day6] 學 Bootstrap 是為了走更長遠的路 ~ Grid 篇 (1)

  • 分享至 

  • xImage
  •  

前言

今天終於來到本系列文第一個重頭戲,
也是 Bootstrap 非常實用的~~~~~ Grid System (網格系統)
Bootstrap Grid 的特點是用在 RWD (響應式網頁設計) 非常好用!
不過並不是用了 Grid 就不需要用到 Flex,
學了之後發現它們是相輔相成的關係吧,
那就讓我們進入正文吧!
(PS. 後來發現 CSS 也有個叫 Grid 的屬性
這邊釐清一下,這篇文章講的是 Bootstrap 的 Grid 哦!

本日正文

Grid system - Bootstrap

首先 Grid 有 Container, Row, Column 這三種元素,
Container 顧名思義就是容器,
你可以先把 Container 想像成像一個 <div> 框住的區塊。

Container 裡面由 Row, Column 組成,
Row 就是列,因此一列裡面會有很多欄,就是 Column。

在 Grid 世界裡,
把一個空間分成 12 個區塊,
因此 Row 一列中最多可以含有 12 個格子。
(PS. 這邊指的不是 Column,不要搞混,看下面例子可能會比較清楚 )

概念講到這邊可能大家還是會覺得有點模糊吧,
沒關係當初的我也是,
還是直接看例子大家應該就知道怎麼回事了~
例如把昨天的例子用 Grid 的方式改寫一下:

<div class="container">
  <div class="row bg-primary">
    <div class="col border">1</div>
  </div>
  <div class="row bg-info">
    <div class="col border">2-1</div>
    <div class="col border">2-2</div>
    <div class="col border">2-3</div>
  </div>
  <div class="row bg-warning">
    <div class="col border">3</div>
  </div>
</div>

https://ithelp.ithome.com.tw/upload/images/20210908/20129873hh7GLdVHDU.png

你可能已經看出一些端倪了,
這邊簡單說明一下,
首先最外面用 container 這個 class,
裡面包三列 row
再來第一列跟第三列因為都只有 1 欄 col
所以寬度佔滿整個 container,
但第二列有 3 欄,
上面有提到一列中最多可以含有 12 個格子,
Grid default 會平均分配,
因此 12/3 = 4
所以每一個 Column 各別會佔 4 個格子的寬度。

進階題來了,
如果現在想要 2-2 比 2-1, 2-3 寬,
2-2 是 2-1, 2-3 的兩倍寬,
這樣該怎麼做?
先讓我們思考一下,
總共 12 格,所以 1:2:1
12/4 = 3,
2-1, 2-3 分別拿到 3 格,
2-2 拿到 6 格,
Bootstrap Grid 有提供 col-3,col-6 這樣的寫法,
如果沒有寫指定數字就會用 12 去平均分配這樣。

所以我們可以改寫成這樣:

<div class="container">
  <div class="row bg-primary">
    <div class="col border">1</div>
  </div>
  <div class="row bg-info">
    <div class="col-3 border">2-1</div>
    <div class="col-6 border">2-2</div>
    <div class="col-3 border">2-3</div>
  </div>
  <div class="row bg-warning">
    <div class="col border">3</div>
  </div>
</div>

https://ithelp.ithome.com.tw/upload/images/20210908/201298739IF8d2YHD7.png

以上只是把 col 改成 col-3,col-6 就有這樣的變化,
是不是很有趣呢?

那你可能會說,萬一我算數不好,
算超過 12 個格子的話怎麼辦?
放心,那就算是超出那列空間,
會自動被換到下一行去。
例如我把上面 2-2 的 col-6 故意改成 col-9
就會變成這樣:

...
...
  <div class="row bg-info">
    <div class="col-3 border">2-1</div>
    <div class="col-9 border">2-2</div>
    <div class="col-3 border">2-3</div>
  </div>
...
...

https://ithelp.ithome.com.tw/upload/images/20210908/201298731Y5urizxo4.png

Grid 好像跟什麼似曾相識?

其實到這邊你會發現 Grid 好像跟之前傳統 HTML/CSS 在寫 % 有點異曲同工之妙,
例如以下例子 <ul> 有 4 個 <li>
然後你就會計算每個 <li> 扣掉 margin 1%,可被分配到 23%,
像這樣:

[HTML]

<ul class="ul">
  <li class="li">1</li>
  <li class="li">2</li>
  <li class="li">3</li>
  <li class="li">4</li>
</ul>

[CSS]

.ul {
  display: flex;
  list-style: none;
}

.li {
  width: 23%;
  margin: 1%;
  background-color: pink;
  padding: 10px;
}

https://ithelp.ithome.com.tw/upload/images/20210908/20129873BQokzC329m.png

Grid 簡化這樣的計算方式,
將空間用 12 格去計算就好,
而且 Grid 好處當然不只這樣,
更重要的是 Bootstrap 有提供不同的 Media Queries(裝置) 可以進行不同設定,
(不太知道 Media Queries 是什麼的人可以參考之前大大在鐵人賽寫的這篇文章 →
Day22:小事之 Media Query )
可以讓你很方便的做到 RWD,
例如電腦版畫面夠寬,我想要讓每一個格子平均分配就好,所以只用 col-md
但在手機版我可能想要突顯某一塊,我就多加一個設定 col-xs-8
讓它在手機版時佔 8 個格子的寬度。

這樣講可能還是有點不清楚,
所以明天文章會詳細說明這一塊,
那今天文章就到這邊啦,
那我們明天再見囉!

這邊也附上我之前很常參考的文章 → 利用 Bootstrap Grid System 排版的學習筆記

還有附上本日 CodePen 連結:
Day6 - Bootstrap Grid
Day6 - HTML/CSS


上一篇
[Day5] 學 Bootstrap 是為了走更長遠的路 ~ Flex 篇
下一篇
[Day7] 學 Bootstrap 是為了走更長遠的路 ~ Grid 篇 (2)
系列文
Re: 從 Next.js 開始的 React 生活31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
eric19740521
iT邦新手 1 級 ‧ 2023-04-13 20:56:55

Bootstrap CSS出來的時間早,Grid網格是採用css flexbox
Tailwind CSS最近幾年才起來的,Grid網格是css grid
css flexbox,css grid兩者用法差異很大!!
目的都是為了排版...

我要留言

立即登入留言